<template >
  <div id="chat">
    <div class="chatBox">

      <div class="chatBox-middle">
        <div v-if="chatList && chatList.length">
          <div v-for="(chat, index) in chatList" class="message-box" :key="index">
            <div>
              <span v-if="chat.user.id !== userInfo.user.id" class="avatar" :src="chat.user.avatar"></span>
            </div>
            <div class="name">{{ chat.user.name }}</div>
            <div class="time">{{ chat.createTime }}</div>

            <span class="text textH">{{ chat.message }}</span>
          </div>
        </div>

        <div class="chatUser-box">
          <div class="chatUser-box-img"></div>
          <div class="chatUser-info">
            <div class="chatUser-info-name">
              <span></span><span class="nowDate"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="chatBox-infoDesk">
        <div class="chatBox-textarea">
          <el-input
            v-model="chatMsg"
            rows="4"
            type="textarea"
            placeholder="请输入咨询信息"
          />
        </div>
        <div class="chatBox-sendOut">
          <el-button class="sendOut" type="primary" @click="getSends" @keyup="getSends"
            >发送</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" >
import { onMounted, ref, reactive } from "vue";
import io from "socket.io-client";
import { useRouter } from "vue-router";
import { getCurrentUser } from '../../api/sessions'


const avatar =
  "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";

export default {
  name: "HomePage",
  setup() {
    const chatList = ref([]);
    const chatMsg = ref("");
    const userList = [{ name: "", id: 1, avatar }];
    const router = useRouter();


    const userInfo = reactive({ user: userList[0] });
    let socket: any;

    onMounted(async () => {
      socket = io("http://10.7.164.51:10797")// 连接后端的 socket.io 方法里面传服务端的ip
      // socket = io("http://localhost:10797") 
      socket.on("connect", () => {
        console.log(socket.id, "监听客户端连接成功-connect");
      });
      socket.on("fresh-message", (data: any) => {
        chatList.value = data;
      });
      const result = await getCurrentUser()
      userList[0].name = result.user.realName;
    });
    const selectUser = (user: any) => {
      userInfo.user = user;
    };
    const getSends = () => {
      socket.emit("send-message", userInfo.user, chatMsg.value);
      chatMsg.value = "";
    };

    const onClickLeft = function () {
      router.back();
    };
    return {
      chatMsg,
      chatList,
      userList,
      userInfo,
      router,

      getSends,
      selectUser,
      onClickLeft,
    };
  },
};
</script>
  
<style scoped>
html,
body {
  background-color: #e8e8e8;
  height: 5rem;
}

#chat .chatBox {
  height: auto;
  background-color: #fff;
  overflow: hidden;
  border-radius: 0.625rem;
}
.name {
  margin-left: 0.625rem;
  font-size: 0.8125rem;
  color: rgb(87, 86, 86);
  position: absolute;
  left: -0.875rem;
  top: 2.25rem;
  z-index: 6;
}
.el-input {
  width: 90%;
  height: 6.25rem;
}
.text {
  position: relative;
  padding: 0.3125rem 0.5rem;
  word-break: break-all;
  background: #b1efd5;
  border: 0.0625rem solid #a8f4d4;
  border-radius: 0.3125rem;
  margin-left: 3.00rem;
}

.textH::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: -1.29rem;
  top: 0.3125rem;
  border: 0.625rem solid;
  border-color: transparent #b5f3d9 transparent transparent;
}

#chat .chatBox-top {
  width: 100%;
  height: 3.75rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #2b3d63;
}

.time {
  font-size: 0.75rem;
  color: #aeadad;
  margin: 20px;
}

#chat .chatBox-top-imgBox {
  margin-left: 1.25rem;
}

#chat .chatBox-top-text {
  margin-left: 1.25rem;
  font-size: 1rem;
  color: #fff;
}

#chat .chatBox-middle {
  width: 100%;
  height: 30rem;
  background-color: #fff;
  border-bottom: 0.0625rem solid #2b3d63;
}

#chat .chatBox-infoDesk {
  width: 100%;
  height: 10rem;
}

#chat .chatBox-textarea {
  width: 100%;
  height: 6.25rem;
}

#chat .chatBox-sendOut {
  margin-top: 0.625rem;
  width: 10%;
  height: 3.125rem;
  position: absolute;
  right: 0rem;
  bottom: 1.25rem;
}

.chatBox-middle {
  overflow: auto;
}

.message-box {
  margin: 0.825rem;
  position: relative;
}

#chat .sendOut {
  padding: 0 1.25rem;
  height: 2.1875rem;
  margin: 0.3125rem 1.25rem 0 0;
}

#chat .chatInfo {
  width: 94%;
  height: 94%;
  margin: 1.25rem auto;
  overflow: auto;
}

#chat .chatUser-box {
  width: 100%;
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
}

#chat .chatUser-box-img {
  display: flex;
}

#chat .chatUser-info {
  margin: 0 1.25rem;
}

#chat .chatUser-info-name {
  font-size: 0.875rem;
  color: #888;
  display: flex;
  flex-direction: row;
}

#chat .nowDate {
  margin: 0 0.625rem;
}

#chat .chatUser-info-text {
  margin-top: 0.3125rem;
  max-width: 20rem;
  padding: 0.5rem;
  background-color: #e8e8e8;
  border-radius: 0.5rem;
  float: left;
  table-layout: fixed;
  word-break: break-all;
  overflow: hidden;
}

#chat .chatUser-info-text span {
  font-size: 0.9375rem;
  line-height: 1.5625rem;
}

#chat .chatUser-box1 {
  flex-direction: row-reverse;
}

#chat .chatUser-info-name1 {
  flex-direction: row-reverse;
}

#chat .chatUser-info-text1 {
  float: right;
}
</style>
  